<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素的显示模式</title>
		<link href="css/xs.css" rel="stylesheet"/>
	</head>
	<body>
		<!-- 元素的显示模式：
		  1块元素：block
		       比较霸道，单独占一行
			   默认宽度是父级元素宽度的100%
			   可以设置宽、高、对齐属性
			   块元素内可以包含行内元素或块元素
			   常见块元素有：
		  2行内元素：inline
		       一行显示多个
			   默认宽度是内容的宽度
			   宽、高、对齐属性设置无效
			   行内元素里一般只包含文本或其他行内元素
			   常见行内元素有：<a>,<strong>,<em>,
			   链接标签中不要再包含链接标签
		   3行内块元素：inline-block
		        一行显示多个
				默认宽度是内容本身的宽度
				可是设置宽高
				<input />、<img />、<td><td />
		   4元素显示模式转换：
			      display:block/inline-block/inline;
		  -->
		  <div>
		  <h4>redmi K70</h4>
		  <p>性能旋风...</p>
		  <span>2399元</span>
		  <del>2499元</del><!-- 显示原价并有降价效果 -->
		  <!-- <span>2399元<del>2499元</del></span> 和上两行显示效果一样-->
		  <span>用户名</span>
		  <input  type="text"/>
		  <span>密码：</span>
		  <del>2499</del>
		  <a href="#">baidu...</a>
		  
		  
		  </div>
	</body>

</html>